<template>
    <view 
      class="card"
      :class="{activeCard: active}" 
      @longpress="longpress" 
      @click="handleClick"
    >
      <!-- <image class="deviceImg" src="../../../static/img/home/maintance.png"></image> -->
      <image class="deviceImg" :src="data.deviceImg"></image>

      <view class="info">
        <view v-for="item in configs" class="item" :key="item.field">
          <view class="label">{{ item.label }}:</view>
          <view class="value">{{ data[item.field] || '----' }}</view>
        </view>
      </view>
    </view>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    sewingId: String
  },
  data() {
    return {
      configs: [
        { label: this.$t('deviceMaintenance.name'), field: 'deviceName'  },
        { label: this.$t('deviceMaintenance.serialNumber'), field: 'deviceSn'  },
        { label: this.$t('deviceMaintenance.type'), field: 'deviceCategory'  },
        { label: this.$t('deviceMaintenance.progress'), field: 'progress'  },
        { label: this.$t('deviceMaintenance.sewingLine'), field: 'sewingName'  },
        { label: this.$t('deviceMaintenance.upkeepTime'), field: 'upkeepTime'  },
      ],
      active: false

    }
  },
  methods: {
    longpress() {
      console.log('longpress');
      this.active = true
      uni.showToast({
        title: "操作成功",
        duration: 1000
      })
      setTimeout(() => {
        this.active = false
      }, 500)
    },
    handleClick() {
      console.log('click');
      uni.navigateTo({
        url: `/pages/deviceMaintenance/detail?id=${this.data.id}&sewingId=${this.sewingId}&deviceSn=${this.data.deviceSn}&maintanceItem=${this.data.maintanceItem}`
      })
    }
  }
}

</script>

<style scoped lang="less"> 
.card {
  display: flex;
  width: 100%;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-top: 8px;
}

.activeCard {
  // height: 180px;
  box-sizing: border-box;
  background-color: #aad4fb;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 #aad4fb;
}

.deviceImg {
  display: block;
  width: 108px;
  height: 108px;
}

.item {
  display: flex;
  padding-bottom: 12px;
}

.info {
  padding-left: 12px;
}

.label {
  min-width: 80px;
  max-width: 100px;
}

.value {

}
</style>